<template>
    <div>
        <!-- 渲染购物车 -->

        <br><br>
        <center>
        <table>
            <tr>
                <th>商品名称&nbsp;</th>
                <th>商品数量</th>
                <th>商品价格</th>
                <th>删除</th>

            </tr>
            <tr v-for="(i, index) in cart" :key="index">
                <td>{{ i.name }}</td>
                <td> <Button color='blue' @click='add(index,"-")'>-</Button> {{ i.num }} <Button color='blue' @click='add(index,"+")'>+</Button> </td>
                <td> {{ i.price }} </td>
                <td> <Button color='red' @click="del(index)">删除</Button> </td>
            </tr>

        </table>
        
        <br>
        <Button @click='add_cart("汽车")'>添加汽车</Button>

        &nbsp;&nbsp;&nbsp;
        您购物车里的商品数量为 : {{ totalCount() }}<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;购物车内的商品总价为: {{ totalprice() }}
        <br>
        <Button @click="des">清空购物车</Button>        

        <br>
        <br>

        <!-- 监听属性 -->
        <button @click="counter++">点击+1</button>

        <br>

        {{ reverse_msg }}
        
        <!-- 绑定样式 -->
        <div :class="{ active:isactive }">
            
        </div>

        <!-- 遍历展示 -->
        <ul>
            <li v-for='(item,index) in tlist' :class="{on:index%2==0,off:index%2!=0}">
                {{ index }}--{{ item.text }}
            </li>
        </ul>

        <br>
        
        <div v-if="type === 'A'"> 
            A
        </div>
        <div v-else-if="'type' === 'B'"> 
            B
        </div>
        <div v-else> 
            C
        </div>

        <br>

        <h5 v-show='ok'>你看见我了</h5>

        <br>

        {{ msg }}
    </center>
    </div>
</template>

<script>
    export default{
        data(){
            return{
                msg:"你好,这里是vue",
                ok:true,
                type:'A',
                tlist:[{text:'食品',price:10},{text:'家电'},{text:'住宅'},{text:'车辆'}],
                
                //购物车
                cart:[{name:'家电',price:178500,num:0},{name:'住宅',price:1980000,num:0},{name:'食品',price:39000,num:0}],

                isactive:true,
                counter:0,
            }
        },
        //声明计算属性
        computed: {
            //反转逻辑
            reverse_msg:function(){
                return '$'+this.msg.split('').reverse().join('');

            }
        },
        //监听属性
        watch: {
            counter:function(nval,oval){
                console.log('计数器变化:'+'从'+oval+'变成了'+nval)
            }
        },

        //声明自定义方法
        methods: {
            //添加购物车方法
            add_cart:function(name){    //添加商品名称参数
                //声明购物车变量
                let cartlist = this.cart;
                //声明坐标
                let find = 0;
                //遍历购物车列表
                for(let i=0, I=cartlist.length; i<I; i++){
                    //判断
                    if(name == cartlist[i]['name']){
                        cartlist[i]['num']++;
                        find = 1;
                        break;

                    }

                }
                //没找到
                if(find == 0){
                    cartlist.push({name:name,num:1,price:975000})
                }
                //赋值
                this.cart = cartlist

            },

            //加减法
            add:function(index,type){
                if(type == '+'){
                    this.cart[index].num++;
                }else{
                    if(this.cart[index].num > 0){
                        this.cart[index].num--;
                    }
                    
                }
                    

            },

            //汇总商品数量
            totalCount:function(){
                //默认值
                let total = 0;
                //遍历
                for(let i=0, I=this.cart.length; i<I; i++){
                    total += this.cart[i].num;
                    

                }
                return total; 
            },

            //汇总商品价格
            totalprice:function(){
                //默认值
                let price = 0;
                //遍历
                for(let i=0, I=this.cart.length; i<I; i++){
                    price += (this.cart[i].num * this.cart[i].price);
                    

                }
                return price; 
            },

            //删除操作
            del:function(index){
                //根据下标删除元素
                this.cart.splice(index,1);

            },

            //清空购物车
            des:function(){
                this.cart = [];

            }

        },
    }
</script>

<style>
.on {background:black;}
.off {background: red;}
.active {
    width: 100px;
    height: 100px;
    background: yellow;
}

</style>

